<template>
	<uni-popup ref="modalOrderSelect" type="bottom">
		<view class="modal-box">
			<image class="modal-close" @click="close" :src="$util.img('upload/uniapp/xxjk/bonusCenter/modal_close.png')"
				mode="aspectFit">
			</image>
			<view class="modal-content">
				<view class="modal-title">选择订单</view>
				<scroll-view class="select-list" scroll-y="true" @scrolltolower="nextPage">
					<view class="select-item" v-for="(item,index) in list" :key="item.order_no" @click="selectItem(index)">
						<view class="order-sn">订单号：{{item.order_no}}</view>
						<image class="icon-check" v-if="index == current"
							:src="$util.img('upload/uniapp/xxjk/bonusCenter/check_select.png')" mode="aspectFit">
						</image>
						<image class="icon-check" v-else
							:src="$util.img('upload/uniapp/xxjk/bonusCenter/check_unselect.png')" mode="aspectFit">
						</image>
					</view>
				</scroll-view>
				<view class="modal-footer">
					<view class="modal-butt" @click="confirm">下一步</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		props: {},
		data() {
			return {
				current: -1,
				list: [],
				listParams: {
					page: 1,
					size: 10,
					page_count:1
				}
			}
		},
		created() {
			this.getList()
		},
		methods: {
			open() {
				this.$refs.modalOrderSelect.open()
			},
			close() {
				this.$refs.modalOrderSelect.close()
			},
			selectItem(index) {
				this.current = index
			},
			confirm() {
				if(this.current>=0){
					this.$emit('change', {
						value: this.list[this.current]
					});
					this.close()
				}
			},
			getList(){
				return new Promise((resolve,reject)=>{
					this.$api.sendRequest({
						url:'/goldpoints/api/Record/bounsRecordList',
						data:{
							page:this.listParams.page,
							page_size:this.listParams.size
						},
						success:(res)=>{
							if(res.code == 0){
								if(this.listParams.page == 1)this.list=[];
								this.list = [...this.list,...res.data.list];
								this.listParams.page_count = res.data.page_count;
							}
						}
					})
				})
			},
			nextPage() {
				if(this.listParams.page<this.listParams.page_count){
					this.listParams.page++;
					this.getList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	/deep/.uni-popup__wrapper {
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		overflow: hidden;
		height: calc(100vh - 240rpx);
		max-height: auto;
	}

	/deep/.uni-popup__wrapper-box {
		height: 100%;
		max-height: 2000rpx!important;
	}

	.modal-box {
		position: relative;
		height: 100%;

		.modal-content {
			height: 100%;
			padding: 0 32rpx;
		}

		.modal-close {
			position: absolute;
			top: 24rpx;
			right: 32rpx;
			width: 48rpx;
			height: 48rpx;
		}

		.modal-title {
			font-weight: 500;
			font-size: 36rpx;
			color: #222222;
			line-height: 50rpx;
			padding: 32rpx 0;
			text-align: center;
		}

		.icon32 {
			width: 32rpx;
			height: 32rpx;
		}

		.modal-tip {
			font-size: 24rpx;
			color: #FC311A;
		}

		.modal-footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding-bottom: 72rpx;
			padding-top: 12rpx;
			z-index: 100;
			background-color: #FFFFFF;

		}

		.modal-butt {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 56rpx;
			width: 638rpx;
			height: 88rpx;
			background: #FC311A;
			border-radius: 130rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	.select-list {
		width: 686rpx;
		box-sizing: border-box;
		margin: 20rpx 0;
		height: 100%;
		height: calc(100% - 100rpx);
		padding-bottom: 200rpx;

		.select-item {
			margin-top: 20rpx;
			padding: 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 128rpx;
			background: #F2F3F5;
			border-radius: 8rpx 8rpx 8rpx 8rpx;

			.order-sn {
				font-size: 32rpx;
				color: #222222;
			}

			.icon-check {
				width: 48rpx;
				height: 48rpx;
			}
		}


	}
</style>